{% extends 'dashboard/layout.html' %}
{% load i18n %}

{% block body_class %}{{ block.super }} create-page{% endblock %}

{% block title %}
    {% blocktrans with name=range.name %}Products in range '{{ name }}'{% endblocktrans %} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li>
            <a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a>
        </li>
        <li>
            <a href="{% url 'dashboard:range-list' %}">{% trans "Ranges" %}</a>
        </li>
        <li>
            <a href="{% url 'dashboard:range-update' pk=range.id %}">'{{ range.name }}'</a>
        </li>
        <li class="active">{% trans "Products" %}</li>
    </ul>
{% endblock %}

{% block headertext %}
    {{ range.name }}: {% trans "products" %}
{% endblock %}

{% block dashboard_content %}

    {% if range.includes_all_products %}
        {% trans "This range contains all products. To add products manually, please unselect the 'Includes All Products' option on the edit range page." %}
    {% else %}

    <div class="table-header">
        <h3>{% trans "Add products" %}</h3>
    </div>

        <div class="well">

            <form action="." method="post" class="form-stacked" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="action" value="add_products"/>
                {% include 'dashboard/partials/form_fields.html' with form=form %}
                <div class="controls">
                    <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Running...' %}">{% trans "Go!" %}</button>
                </div>
            </form>

            {% with uploads=range.file_uploads.all %}
                {% if uploads %}
                    <div class="table-header">
                        <h3>{% trans "Upload history" %}</h3>
                    </div>
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>{% trans "Filename" %}</th>
                                <th>{% trans "New products" %}</th>
                                <th>{% trans "Duplicate products" %}</th>
                                <th>{% trans "Unknown products" %}</th>
                                <th>{% trans "Date uploaded" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for upload in uploads %}
                                <tr>
                                    <td>{{ upload.filename }}</td>
                                    <td>{{ upload.num_new_skus }}</td>
                                    <td>{{ upload.num_duplicate_skus }}</td>
                                    <td>{{ upload.num_unknown_skus }}</td>
                                    <td>{{ upload.date_uploaded }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% endif %}
            {% endwith %}

            {% if products %}
                <form action="." method="post">
                    {% csrf_token %}
                    <table class="table table-striped table-bordered table-hover">
                        <caption>
                            <h3 class="pull-left">{% trans "Products in range" %}</h3>
                            <div class="pull-right">
                                <input type="hidden" name="action" value="remove_selected_products" />
                                <button type="submit" class="btn btn-default" data-loading-text="{% trans 'Removing...' %}">{% trans "Remove selected products" %}</button>
                            </div>
                        </caption>
                        <thead>
                            <tr>
                                <th></th>
                                <th>{% trans "UPC" %}</th>
                                <th>{% trans "Title" context "Product title" %}</th>
                                <th>{% trans "Is product discountable?" %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody class="product_list">
                        {% for product in products %}
                            <tr id="product_{{ product.pk }}">
                                <td>
                                    <input type="checkbox" name="selected_product" value="{{ product.id }}" />
                                </td>
                                <td>{{ product.upc|default:"-" }}</td>
                                <td><a href="{% url 'dashboard:catalogue-product' pk=product.id %}">{{ product.get_title }}</a></td>
                                <td>{% if product.get_is_discountable %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}</td>
                                <td>
                                    <a class="btn btn-danger" href="#" data-behaviours="remove">{% trans "Remove" %}</a>
                                    <a href="#" class="btn btn-info btn-handle"><i class="icon-move icon-large"></i> {% trans "Re-order" %}</a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {% include "dashboard/partials/pagination.html" %}
                </form>

            {% else %}
                <table class="table table-striped table-bordered table-hover">
                    <caption>
                        {% trans "Products in Range" %}
                    </caption>
                    <tr><td>{% trans "No products found." %}</td></tr>
                </table>
            {% endif %}


    </div>
        {% endif %}
        <div class="form-actions">
            <a href="{% url 'dashboard:range-update' pk=range.id %}" class="btn btn-lg btn-primary">{% trans "Edit range" %}</a> {% trans "or" %}
            <a href="{% url 'dashboard:range-list' %}" class="">{% trans "return to range list" %}</a>
        </div>

{% endblock dashboard_content %}

{% block onbodyload %}
    {{ block.super }}
    oscar.dashboard.ranges.init();
    oscar.dashboard.reordering.init({
        wrapper: '.product_list',
        submit_url: '{% url 'dashboard:range-reorder' pk=range.id %}'
    });
{% endblock %}
